<template>
  <div class="innerzon">
    <!-- 左边 -->
    <div class="left-module">
      <!-- 真烟异流 -->
      <div class="smoke-flow">
        <div class="public-top">真烟异流</div>
        <div class="sf-main">
          <!-- 真烟流出 -->
          <div class="sf-topic">真烟流出</div>
          <div class="sf-con-main">
            <div
              class="sfcm-item"
              v-for="(item, index) in smokeFlowData.kindArr"
              :key="index + 'sfcm'"
            >
              <img src="../../assets/img/ng-icon.png" class="icon" v-if="index == 1"/>
              <img src="../../assets/img/ng-icon2.png" class="icon" v-if="index == 0"/>
              <div class="sfcm-item-detail">
                {{ item.name }}
                <div class="big-num">
                  {{ item.num }}
                  <b v-if="item.unit">({{ item.unit }})</b>

                  <span v-if="!item.unit">%</span>
                  <img
                    v-if="item.isTrend && !item.unit"
                    src="../../assets/regulation/arrup.png"
                    class="arrawtransform"
                  />
                  <img
                    v-if="!item.isTrend && !item.unit"
                    src="../../assets/regulation/arrdown.png"
                    class="arrawtransform"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="sf-list">
            <div class="sf-list-tab">
              <div
                class="item"
                v-for="(item, index) in smokeFlowData.tabList"
                :key="'tab' + index"
                :class="{ 'is-check': tabFlag == index }"
                @click="tabHandle(index)"
              >
                {{ item }}
              </div>
            </div>
            <div class="sf-list-main" v-if="tabFlag == 0">
              <smoke-flow-item
                widthNum="178"
                titWidth="70"
                :list="smokeFlowData.placeRank"
              ></smoke-flow-item>
              <div class="echart-pie">
                <pie-echart :echartData="smokeFlowData.echartData"></pie-echart>
              </div>
            </div>
            <div class="sf-list-main" v-if="tabFlag == 1">
              <smoke-flow-item
                widthNum="228"
                titWidth="130"
                :list="smokeFlowData.produceRank"
              ></smoke-flow-item>
            </div>
          </div>

          <!-- 真烟查获 -->
          <div class="sf-topic">真烟查获</div>
          <div class="sf-con-main">
            <div
              class="sfcm-item"
              v-for="(item, index) in smokeSeizure.kindArr"
              :key="index + 'sfcm'"
            >
              <img src="../../assets/img/ng-icon3.png" v-if="index==0" class="icon" />
              <img src="../../assets/img/ng-icon4.png" v-if="index==1" class="icon" />

              <div class="sfcm-item-detail">
                {{ item.name }}
                <div class="big-num">
                  {{ item.num }}
                  <b v-if="item.unit">({{ item.unit }})</b>
                  <span v-if="!item.unit">%</span>
                  <img
                    v-if="item.isTrend && !item.unit"
                    src="../../assets/regulation/arrup.png"
                    class="arrawtransform"
                  />
                  <img
                    v-if="!item.isTrend && !item.unit"
                    src="../../assets/regulation/arrdown.png"
                    class="arrawtransform"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="sf-list">
            <div class="sf-list-tab">
              <div
                class="item"
                v-for="(item, index) in smokeSeizure.tabList"
                :key="'tab' + index"
                :class="{ 'is-check': tabFlagSecond == index }"
                @click="tabSecondHandle(index)"
              >
                {{ item }}
              </div>
            </div>
            <div class="sf-list-main" v-if="tabFlagSecond == 0">
              <smoke-flow-item
                widthNum="178"
                titWidth="70"
                :list="smokeSeizure.placeRank"
              ></smoke-flow-item>
              <div class="echart-pie">
                <pie-echart :echartData="smokeSeizure.echartData"></pie-echart>
              </div>
            </div>
            <div class="sf-list-main" v-if="tabFlagSecond == 1">
              <smoke-flow-item
                widthNum="228"
                titWidth="135"
                :list="smokeSeizure.produceRank"
              ></smoke-flow-item>
            </div>
          </div>
        </div>
      </div>

      <!-- 真烟案件 -->
      <div class="smoke-case">
        <div class="public-top">
          真烟案件
          <div class="smoke-case-tab">
            <div
              class="item"
              v-for="(item, index) in ['真烟流出', '真烟查获']"
              :key="'tab' + index"
              :class="{ 'tabsmall-is-check': tabSmallFlag == index }"
              @click="secondaryTabHandle(index)"
            >
              {{ item }}
            </div>
          </div>
        </div>

        <div class="sc-main">
          <smoke-case-echart
            :idName="'smokeCaseLine'"
            :echartData="smokeCase.totalTrend"
            v-if="tabSmallFlag == 0"
          ></smoke-case-echart>
          <smoke-case-echart
            :idName="'smokeCaseLine0'"
            :echartData="smokeCase.flowTrend"
            v-if="tabSmallFlag == 1"
          ></smoke-case-echart>
        </div>
      </div>
    </div>

    <!-- 中间 -->
    <div class="center-module">
      <!-- 地图 -->
      <div class="map-style">
        <div class="dflex width100per">
          <div class="maptableft">
            <div class="centitlebg">安徽省</div>
          </div>
        </div>
        <div id="neiguan" style="width:100%;height:500px;"></div>
        <!-- <anhui-map :zoom="1.2"></anhui-map> -->
      </div>
      <!-- 真烟外流趋势分析 -->
      <div class="smoke-trend">
        <div class="big-public-top">
          真烟外流趋势分析
          <div class="smoke-trend-tab">
            <div
              class="item"
              v-for="(item, index) in ['外流总量趋势', '流销比趋势']"
              :key="'tab' + index"
              :class="{ 'tabsmall-is-check': lineFlag == index }"
              @click="lineTabHandle(index)"
            >
              {{ item }}
            </div>
          </div>
        </div>
        <div class="smoke-trend-main">
          <smoke-trend-line
            :idName="'smokeTrendLine'"
            :echartData="smokeTrend.totalTrend"
            v-if="lineFlag == 0"
          ></smoke-trend-line>
          <smoke-trend-line
            :idName="'smokeTrendLine0'"
            :echartData="smokeTrend.flowTrend"
            v-if="lineFlag == 1"
          ></smoke-trend-line>
        </div>
      </div>
    </div>

    <!-- 右边 -->
    <div class="right-module">
      <!-- 预警监测 -->
      <div class="early-warning">
        <div class="public-top">预警监测</div>
        <div class="ew-main">
          <div class="ew-con-main">
            <div
              class="sfcm-item"
              v-for="(item, index) in earlyWarningData.kindArr"
              :key="index + 'sfcm'"
              @click="isShow(index, 'sfcm')"
              
            >
              <img src="../../assets/img/ng-icon1.png" v-if="index == 1" class="icon" />
               <img src="../../assets/img/ng-icon5.png" v-if="index == 0" class="icon" />
              <div class="sfcm-item-detail">
                {{ item.name }}
                <div class="big-num">
                  <CountTo
                    :startVal="startVal"
                    :endVal="item.num"
                    :duration="duration"
                    v-if="item.unit"
                  />
                  {{item.unit ? '' : item.num}}
                  <b v-if="item.unit">({{ item.unit }})</b>

                  <span v-if="!item.unit">%</span>
                  <img
                    v-if="item.isTrend && !item.unit"
                    src="../../assets/regulation/arrup.png"
                    class="arrawtransform"
                  />
                  <img
                    v-if="!item.isTrend && !item.unit"
                    src="../../assets/regulation/arrdown.png"
                    class="arrawtransform"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="ew-topic">单位预警数量 Top5</div>
          <div class="sle-category">
            <skill-level-eacht
              :echartData="earlyWarningData.echartData"
            ></skill-level-eacht>
          </div>
        </div>
      </div>

      <!-- 监督检查 -->
      <div class="super-review">
        <div class="public-top">监督检查</div>
        <div class="sr-main">
          <div class="inspect-list">
            <div
              class="item"
              v-for="(item, index) in superReviewData.reviewList"
              :key="index + 'item'"
              @click="isShow(index, 'super')"
            >
              <img :src="item.src" class="icon" />
              <div class="item-detail">
                {{ item.name }}
                <div class="big-num">
                  <CountTo
                    :startVal="startVal"
                    :endVal="item.value"
                    :duration="duration"
                  />
                  <b>({{ item.unit }})</b>
                </div>
              </div>
            </div>
          </div>
          <div class="inspect-list">
            <div
              class="item"
              v-for="(item, index) in superReviewData.radioList"
              :key="index + 'item'"
            >
              <img :src="item.src" class="icon" />
              <div class="item-detail">
                {{ item.name }}
                <div class="small-num">
                  {{ item.radio }}
                  <img
                    v-if="item.isTrend"
                    src="../../assets/regulation/arrup.png"
                    class="arrawtransform"
                  />
                  <img
                    v-else
                    src="../../assets/regulation/arrdown.png"
                    class="arrawtransform"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 外流重点户 -->
      <div class="key-household" style="margin: 0 !important">
        <div class="public-top">外流重点户</div>
        <div class="kh-main">
          <div class="ew-con-main">
            <div
              class="sfcm-item"
              v-for="(item, index) in keyHouseholdData.kindArr"
              :key="index + 'sfcm'"
              @click="isShow(index,'wailiu')"
            >
              <img
                src="../../assets/img/ng-pers.png"
                class="icon"
                style="margin-left: 10px"
                v-if="index == 0"
              />
              <img
                src="../../assets/img/ng-pers1.png"
                class="icon"
                style="margin-left: 10px"
                v-if="index == 1"
              />
              <div class="sfcm-item-detail">
                {{ item.name }}
                <div class="big-num">
                  <CountTo
                    :startVal="startVal"
                    :endVal="item.num"
                    :duration="duration"
                    v-if="item.unit"
                  />
                  {{item.unit ? "" : item.num}}
                  <b v-if="item.unit">({{ item.unit }})</b>

                  <span v-if="!item.unit">%</span>
                  <img
                    v-if="item.isTrend && !item.unit"
                    src="../../assets/regulation/arrup.png"
                    class="arrawtransform"
                  />
                  <img
                    v-if="!item.isTrend && !item.unit"
                    src="../../assets/regulation/arrdown.png"
                    class="arrawtransform"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="ew-topic" style="margin: 0px">外流重点户 Top5</div>
          <div class="pictorialBar">
            <pictorial-bar></pictorial-bar>
          </div>
        </div>
      </div>
    </div>

    <div class="mask-postion" v-if="popShow">
      <pop-table @isHide="isHide" v-if="popFlag == 'sfcm'"></pop-table>
      <big-pop-table @isHide="isHide" v-if="popFlag == 'wailiu'"></big-pop-table>
      <pop-echart @isClose="isClose" v-if="popFlag == 'super'"></pop-echart>
    </div>
  </div>
</template>
<script>
var indexData = {
  // 真烟流出
  smokeFlowData: {
    tabList: ["流出地区 Top5", "流出品规 Top5"],
    kindArr: [
      {
        name: "流出量",
        unit: "万支",
        num: 846.44,
      },
      {
        name: "同比",
        unit: "",
        num: "+57.37",
        isTrend: true,
      },
    ],
    placeRank: [
      {
        place: "亳州市",
        value: 100,
        num: 83.9,
        unit: "万支",
        radio: 105.74,
        isTrend: true,
      },
      {
        place: "阜阳市",
        value: 95,
        num: 74.82,
        unit: "万支",
        radio: 25.66,
        isTrend: false,
      },
      {
        place: "合肥市",
        value: 85,
        num: 56.88,
        unit: "万支",
        radio: 99.44,
        isTrend: true,
      },
      {
        place: "蚌埠市",
        value: 83,
        num: 38.48,
        unit: "万支",
        radio: 106.22,
        isTrend: true,
      },
      {
        place: "淮南市",
        value: 78,
        num: 32.18,
        unit: "万支",
        radio: 18.92,
        isTrend: true,
      },
    ],
    produceRank: [
      {
        place: "红三环(渡江)",
        value: 100,
        num: 78.18,
        unit: "万支",
        radio: 191.72,
        isTrend: true,
      },
      {
        place: "黄山(嘉宾迎客松)",
        value: 78,
        num: 55.58,
        unit: "万支",
        radio: 10.58,
        isTrend: true,
      },
      {
        place: "黄山(新一品)",
        value: 60,
        num: 53.78,
        unit: "万支",
        radio: 25.77,
        isTrend: true,
      },
      {
        place: "黄山(印象一品)",
        value: 50,
        num: 47.26,
        unit: "万支",
        radio: 191.37,
        isTrend: true,
      },
      {
        place: "利群(新版)",
        value: 50,
        num: 46.38,
        unit: "万支",
        radio: 30.8,
        isTrend: true,
      },
    ],
    echartData: [
      {
        name: "亳州市",
        value: 19.71,
        num:83.9
      },
      {
        name: "阜阳市",
        num: 74.82,
        value: 17.58
      },
      {
        name: "合肥市",
        num: 56.88,
        value: 13.36
      },
      {
        name: "蚌埠市",
        num: 38.48,
        value:9.04
      },
      {
        name: "淮南市",
        num: 32.18,
        value: 7.56
      },
      {
        name: "其他",
        num: 139.42,
        value:32.75
      },
    ],
  },
  // 真烟查获
  smokeSeizure: {
    tabList: ["查获地区 Top5", "查获品规 Top5"],
    kindArr: [
      {
        name: "查获量",
        unit: "万支",
        num: 370.47,
      },
      {
        name: "同比",
        unit: "",
        num: "-2.2",
        isTrend: false,
      },
    ],
    placeRank: [
      {
        place: "滁州市",
        value: 100,
        num: 107.88,
        unit: "万支",
        radio: 21.19,
        isTrend: false,
      },
      {
        place: "芜湖市",
        value: 78,
        num: 48.52,
        unit: "万支",
        radio: 41.13,
        isTrend: true,
      },
      {
        place: "合肥市",
        value: 60,
        num: 35.58,
        unit: "万支",
        radio: 44.96,
        isTrend: false,
      },
      {
        place: "池州市",
        value: 50,
        num: 31.3,
        unit: "万支",
        radio: 221.36,
        isTrend: true,
      },
      {
        place: "安庆市",
        value: 50,
        num: 28.6,
        unit: "万支",
        radio: 11.89,
        isTrend: true,
      },
    ],
    produceRank: [
      {
        place: "钻石(硬迎宾)",
        value: 100,
        num: 46.26,
        unit: "万支",
        radio: 105.24,
        isTrend: true,
      },
      {
        place: "钻石(硬特醇)",
        value: 78,
        num: 20.9,
        unit: "万支",
        radio: 19.98,
        isTrend: true,
      },
      {
        place: "钻石(细支荷花)",
        value: 60,
        num: 18.5,
        unit: "万支",
        radio: 7.31,
        isTrend: true,
      },
      {
        place: "钻石(双中支荷花)",
        value: 50,
        num: 17.66,
        unit: "万支",
        radio: 13.21,
        isTrend: true,
      },
      {
        place: "钻石(闪光)",
        value: 50,
        num: 15.7,
        unit: "万支",
        radio: 31.49,
        isTrend: true,
      },
    ],
    echartData: [
      {
        name: "滁州市",
        num: 107.88,
        value: 27.23
      },
      {
        name: "芜湖市",
        num: 48.52,
        value: 12.29
      },
      {
        name: "合肥市",
        num: 35.58,
        value: 9.01
      },
      {
        name: "池州市",
        num: 31.3,
        value: 7.93
      },
      {
        name: "安庆市",
        num: 28.6,
        value:7.24
      },
      {
        name: "其他",
        num: 142.98,
        value:36.3
      },
    ],
  },

  // 真烟案件
  smokeCase: {
    totalTrend: {
      flag: ["双2", "双5", "双10", "双20", "双30及以上"],
      data: [230.22, 125.84, 68.8, 0, 0],
      lineData: [74, 20, 4, 0, 0],
    },
    flowTrend: {
      flag: ["双2", "双5", "双10", "双20", "双30及以上"],
      data: [106.82, 62.4 , 15.18, 0,0],
      lineData: [35, 10, 1, 0, 0],
    },
  },

  // 真烟外流趋势分析
  smokeTrend: {
    totalTrend: {
      max: 400,
      min: 0,
      unit: "(万支)",
      date: [
        "2022.5",
        "2022.6",
        "2022.7",
        "2022.8",
        "2022.9",
        "2022.10",
        "2022.11",
        "2022.12",
        "2023.1",
        "2023.2",
        "2023.3",
        "2023.4",
      ],
      data: [
        173.1, 111.3, 135.3, 102.1, 227.54, 134.9, 111.1, 99.84, 366.53, 177.82,
        136.32, 159.18,
      ],
    },
    flowTrend: {
      max: 0.03,
      min: 0,
      unit: "(%)",
      date: [
        "2022.5",
        "2022.6",
        "2022.7",
        "2022.8",
        "2022.9",
        "2022.10",
        "2022.11",
        "2022.12",
        "2023.1",
        "2023.2",
        "2023.3",
        "2023.4",
      ],
      data: [
        0.03, 0.02, 0.02, 0.01, 0.03, 0.02, 0.02, 0.03, 0.02, 0.03, 0.02, 0.03,
      ],
    },
  },
  //   预警监测
  earlyWarningData: {
    kindArr: [
      {
        name: "预警产生数",
        unit: "条",
        num: 1232,
      },
      {
        name: "同比",
        unit: "",
        num: "+11.22",
        isTrend: true,
      },
    ],
    echartData: {
      valueArr: [90, 80, 60, 40, 20],
      areaArr: ["马鞍山市", "淮南市", "芜湖市", "黄山市", "合肥市"],
    },
  },

  // 监督检查
  superReviewData: {
    reviewList: [
      {
        name: "监督检查",
        value: 24,
        unit: "次",
        src:require('../../assets/img/ng-log1.png')
      },
      {
        name: "发现问题",
        value: 115,
        unit: "次",
        src:require('../../assets/img/ng-log2.png')
      },
      {
        name: "整改建议",
        value: 118,
        unit: "次",
        src:require('../../assets/img/ng-log3.png')
      },
      {
        name: "整改反馈",
        value: 116,
        unit: "次",
        src:require('../../assets/img/ng-log4.png')
      },
    ],
    radioList: [
      {
        name: "同比",
        radio: "+11.22%",
        isTrend: true,
        src:require('../../assets/img/ng-log5.png')
      },
      {
        name: "同比",
        radio: "+5.23%",
        isTrend: true,
        src:require('../../assets/img/ng-log6.png')
      },
      {
        name: "同比",
        radio: "+5.23%",
        isTrend: true,
        src:require('../../assets/img/ng-log7.png')
      },
      {
        name: "同比",
        radio: "+5.23%",
        isTrend: true,
        src:require('../../assets/img/ng-log8.png')
      },
    ],
  },

  //外流重点户
  keyHouseholdData: {
    kindArr: [
      {
        name: "外流重点户",
        unit: "户",
        num: 56,
      },
      {
        name: "同比",
        unit: "",
        num: "+4.63",
        isTrend: true,
      },
    ],
  },
};
import smokeFlowItem from "@/components/innerzon/smokeFlowItem";
import pieEchart from "@/components/innerzon/pie";
import smokeCaseEchart from "@/components/innerzon/smokeCaseEchart";
import anhuiMap from "@/components/echart/anhuiMap";
import smokeTrendLine from "@/components/innerzon/smokeTrendLine";
import skillLevelEacht from "@/components/innerzon/skillLevelEacht";
import pictorialBar from "@/components/innerzon/pictorialBar";
import popTable from "@/components/innerzon/popTable";
import bigPopTable from "@/components/innerzon/bigPopTable";
import popEchart from "@/components/innerzon/popEchart";
import Anhui from "@/mapdata/anhui/anhui.json";
export default {
  data() {
    return {
      ...indexData,
      tabFlag: 0,
      tabFlagSecond: 0,
      startVal: 0,
      duration: 3000,
      endVal: 864.0,
      tabSmallFlag: 0,
      lineFlag: 0,
      popShow: false,
      popFlag: "",
             regionsdata: [
        {
          name: "蚌埠市",
          namea: "蚌埠",
          littitle: "B",
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
        
        },
        {
          name: "合肥市",
          namea: "合肥",
          littitle: "A",
          itemStyle: {
            color: "rgba(0, 255, 6, 1)", //省份背景色
          },
         
        },
        {
          name: "芜湖市",
          namea: "芜湖",
          littitle: "B",
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
        
        },
        {
          name: "宣城市",
          namea: "宣城",
          littitle: "B",
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
        
        },
        {
          name: "池州市",
          namea: "池州",
          littitle: "B",
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
         
        },
        {
          name: "亳州市",
          namea: "亳州",
          littitle: "B",
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
        
        },
        {
          name: "铜陵市",
          namea: "铜陵",
          littitle: "A",
          itemStyle: {
            color: "rgba(0, 255, 6, 1)", //省份背景色
          },
        
        },
        {
          name: "淮北市",
          namea: "淮北",
          littitle: "B",
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
         
        },
        {
          name: "淮南市",
          namea: "淮南",
          littitle: "C",
          itemStyle: {
            color: "rgba(255, 0, 0, 1)", //省份背景色
          },
        
        },
        {
          name: "黄山市",
          namea: "黄山",
          littitle: "B",
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
        
        },
        {
          name: "安庆市",
          namea: "安庆",
          littitle: "A",
          itemStyle: {
            color: "rgba(0, 255, 6, 1)", //省份背景色
          },
        
        },
        {
          name: "滁州市",
          namea: "滁州",
          littitle: "B",
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
       
        },
        {
          name: "阜阳市",
          namea: "阜阳",
          littitle: "C",
          itemStyle: {
            color: "rgba(255, 0, 0, 1)", //省份背景色
          },
         
        },
        {
          name: "宿州市",
          namea: "宿州",
          littitle: "B",
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
         
        },
        {
          name: "马鞍山市",
          namea: "马鞍山",
          littitle: "B",
          itemStyle: {
            color: "rgba(0, 124, 236, 1)", //省份背景色
          },
         
        },
        {
          name: "六安市",
          namea: "六安",
          littitle: "A",
          itemStyle: {
            color: "rgba(0, 255, 6, 1)", //省份背景色
          },
          
        },
      ],
    };
  },
  components: {
    smokeFlowItem,
    pieEchart,
    smokeCaseEchart,
    anhuiMap,
    smokeTrendLine,
    skillLevelEacht,
    pictorialBar,
    popTable,
    popEchart,
    bigPopTable
  },
  mounted() {
    //  this.mapshow(
    //     {
    //       ename: Anhui,
    //       name: "安徽",
    //     },
    //     "neiguan"
    //   ); //初始地图
    this.mapneiguan('neiguan')
  },
  beforeDestroy() {},
  methods: {
    tabSecondHandle(index) {
      this.tabFlagSecond = index;
    },
    tabHandle(index) {
      this.tabFlag = index;
    },
    secondaryTabHandle(index) {
      this.tabSmallFlag = index;
    },
    lineTabHandle(index) {
      this.lineFlag = index;
    },
    isShow(index, type) {
      if (index == 0) {
        this.popShow = true;
        this.popFlag = type;
      }
    },
    isHide(val) {
      this.popFlag="";
      this.popShow = val;
    },
    isClose() {
      this.popFlag="";
      this.popShow = false;
    },
    /////地图不是3d的开始
        mapneiguan(id){
      let that = this;
      let myChart = this.$echarts.init(document.getElementById(id));
      
      //阴影区域
      let option={
        
      
        // 地图的阴影底图
        geo: {
          map: "Anhui",
          zoom: 1.1,
          top: '50px',
          layoutCenter: ['50%', '50%'],//位置
	        layoutSize:'85%',//大小
          roam: false,
          itemStyle: {
            normal: {
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#09132c", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#274d68", // 100% 处的颜色
                  },
                ],
                globalCoord: true, // 缺省为 false
              },
              shadowColor: "rgb(58,115,192)",
              shadowOffsetX: 10,
              shadowOffsetY: 11,
            },
            // emphasis: {

            //   areaColor: "#2AB8FF",
            //   borderWidth: 0,
            //   color: "green",
            //   label: {
            //     show: false,
            //   },
            // },
          },
        },
         visualMap : {
                show:false,
                type : 'piecewise',
                top : 50,
                right : 15,
                 pieces : [
                    { min : 80 , color : '#00FF06' },
                    { min : 60 , max : 80 , color : '#007CEC' },
                    { max : 60 , color : '##FF0000' },
                    
                ],
            },
        series: [
          {
            type: "map",
            map: "Anhui",
            top: '50px',
            layoutCenter: ['50%', '50%'],//位置
	           layoutSize:'85%',//大小
            //  right:'0%',
            // aspectScale: 0.9,
           //  layoutCenter: ["80%", "50%"], //地图位置
            // layoutSize: "100%",
            zoom: 1.1,
            label: {
              normal: {
                show: true,
                fontFamily: "SourceHanSansCN",
                fontSize: "12",
                color: "#FEFEFE",
                formatter: function (param) {
                var str = '   ' + param.data.namea;
                // var str = param.data.namea;
                // console.log(param)
                return str;
              },
              },
              // emphasis: {
              //   show: true,
              //   fontFamily: "SourceHanSansCN",
              //   fontSize: "12",
              //   color: "#FEFEFE",
              // },
            
            },
            // tooltip:{} tooltip可结合formatter、div、css实现样式
            itemStyle: {
              normal: {
                   borderColor: "rgba(17, 44, 112, .7)",
                borderWidth: 0.4,
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 300,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#003ecb", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#2bc8ff",
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
              // emphasis: {
              //   shadowColor: "rgba(0, 0, 0, 1)",
              //   shadowBlur: 10,
              //   shadowOffsetX: 5,
              //   shadowOffsetY: 5,
              //   areaColor: {
              //     type: "linear-gradient",
              //     x: 0,
              //     y: 0,
              //     x2: 0,
              //     y2: 1,
              //     colorStops: [
              //       {
              //         offset: 0,
              //         color: "#F5B615", // 0% 处的颜色
              //       },
              //       {
              //         offset: 1,
              //         color: "#E27B0d",
              //       },
              //     ],
              //   },
              // },
            },
            // zlevel: 1,
            data: this.regionsdata,
          },
        ],
      };
     
      myChart.showLoading();
       this.$echarts.registerMap("Anhui", Anhui);
      this.$nextTick(() => {
          myChart.setOption(option, false);
          myChart.resize();
          myChart.hideLoading();
      });
    
      
    },
    /////地图不是3d的结束
  mapshow(map, id) {
      let that = this;
      //阴影区域
      let option = {
        // top:'-180px',
        // right:'-40px',
      
        series: [
          {
            type: "map3D",
            zoom: 2,

             top:'1%',
            selectedMode: "single", //地图高亮单选
            regionHeight: 40, //地图高度
            map: map.ename,
            viewControl: {
              center: [-10, 0, 0],
              distance: 210, //地图视角 控制初始大小
              autoRotate: false,
              rotateSensitivity: 0,
              alpha: 80, //视角绕 x 轴，即上下旋转的角度
              // rotateSensitivity: [1, 1],
              animation: true,
              zoomSensitivity: false, //是否开启缩放和平移/鼠标滑动缩放禁止
            },
            //  zoomSensitivity: false,//是否开启缩放和平移/鼠标滑动缩放禁止
            label: {
              show: true, //是否显示市
              textStyle: {
                color: "#fff", //文字颜色
                fontSize: 12, //文字大小
                // backgroundColor: "rgba(0,0,0,0)",
              },
              // formatter: function (param) {
              //     var str = '   '+param.data.littitle + "\n" + param.data.namea;
              //  // var str = param.data.namea;
              //   // console.log(param)
              //   return str;
              // },
            },
            itemStyle: {
              // areaColor: 'red',
              color: "#2B5890", //地图颜色
                borderColor: "rgba(17, 44, 112, .7)",
                borderWidth: 0.4,
              // borderWidth: 2, //分界线wdith
              // borderColor: "#000", //分界线颜色
            },

            // emphasis: {
            //     show: false,
            //     //   label: {
            //     //     show: true, //是否显示高亮
            //     //     textStyle: {
            //     //       color: "#fff", //高亮文字颜色
            //     //     },
            //     //   },
            //     //   itemStyle: {
            //     //     color: "#0489d6", //地图高亮颜色
            //     //   },
            // },
            data: this.regionsdata,
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById(id));
      myChart.showLoading();
      this.$echarts.registerMap(map.ename, map.ename);
      this.$nextTick(() => {
        // 初始化地图
        myChart.setOption(option, false);
       

        myChart.resize();
        myChart.hideLoading();
      });
     
      //mapbar
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/scss/qjzl-neiguan.scss";
.innerzon {
  width: 100%;
  display: flex;
}
.mask-postion {
  width: 100%;
  height: 100%;
  background: rgba(16, 11, 42, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
// 头部公共样式
.public-top {
  width: 420px;
  height: 38px;
  background: url(../../assets/img/ng-lefttitle.png) no-repeat;
  background-size: 100% 100%;
  padding-left: 38px;
  white-space: nowrap;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  .smoke-case-tab {
    padding-left: 150px;
    display: flex;
    & > div {
      width: 92px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      background: url(../../assets/img/ng-tab1-bg.png) no-repeat;
      background-size: 100% 100%;
      background-origin: border-box;
    }
    & > div:last-child {
      margin-left: 16px;
    }
    .tabsmall-is-check {
      background: url(../../assets/img/ng-tab1-check.png);
      background-size: 100% 100%;
      background-origin: border-box;
    }
    .sc-main {
      width: 100%;
      height: 162px;
    }
  }
}

.big-public-top {
  width: 491px;
  height: 38px;
  background: url(../../assets/img/ng-centertit-bg.png) no-repeat;
  background-size: 100% 100%;
  padding-left: 38px;
  white-space: nowrap;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  display: flex;
  // align-items: center;
  line-height: 38px;
  .smoke-trend-tab {
    padding-left: 120px;
    display: flex;
    padding-top: 8px;
    & > div {
      width: 152px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      background: url(../../assets/img/ng-tab-bg.png) no-repeat;
      background-size: 100% 100%;
      background-origin: border-box;
    }
    & > div:last-child {
      margin-left: 16px;
    }
    .tabsmall-is-check {
      background: url(../../assets/img/ng-tab-check.png);
      background-size: 100% 100%;
      background-origin: border-box;
    }
    .sc-main {
      width: 100%;
      height: 162px;
    }
  }
}

// 21号蓝色字体样式
.big-num {
  font-size: 21px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #34effe;
  b {
    font-size: 14px;
    color: #fff;
  }
  img {
    width: 12px;
    height: 16px;
    margin-left: 8px;
  }
}

//18号蓝色字体样式
.small-num {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #34effe;
}

.left-module {
  max-width: 482px;
  flex: 1;
  flex-shrink: 0;
  .smoke-flow {
    width: 100%;
    height: 594px;
    .sf-main {
      width: 482px;
      height: 565px;
      background: url(../../assets/img/ng-smoke-bg.png);
      background-size: 100% 100%;
      background-origin: border-box;
      overflow: hidden;
      .sf-topic {
        width: 463px;
        height: 32px;
        margin: 8px auto 10px;
        box-sizing: border-box;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #ffffff;
        padding-left: 38px;
        line-height: 32px;
        background: url(../../assets/img/ng-topic-bg.png);
        background-size: 100% 100%;
        background-origin: border-box;
      }

      .sf-con-main {
        width: 100%;
        height: 46px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 37px;
        .sfcm-item {
          flex: 1;
          display: flex;
          align-items: center;
          .icon {
            width: 50px;
            height: 46px;
            margin-right: 13px;
          }
          .sfcm-item-detail {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #ffffff;
            line-height: 1.2;
          }
        }
      }

      .sf-list-tab {
        padding-top: 15px;
        padding-bottom: 7px;
        display: flex;
        align-items: center;
        margin-left: 25px;
        .item {
          width: 152px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          background: url(../../assets/img/ng-tab-bg.png);
          background-size: 100% 100%;
          background-origin: border-box;
          &:last-child {
            margin-left: 9px;
          }
        }
        .is-check {
          background: url(../../assets/img/ng-tab-check.png);
          background-size: 100% 100%;
          background-origin: border-box;
        }
      }

      .sf-list-main {
        padding-right: 30px;
        display: flex;
        .echart-pie {
          width: 127px;
          height: 127px;
          flex-shrink: 0;
        }
      }
    }
  }

  .smoke-case {
    width: 100%;
    height: 200px;
    margin-top: 15px;
    .sc-main {
      height: 162px;
      background: url(../../assets/img/ng-sc-bg.png);
      background-size: 100% 100%;
      background-origin: border-box;
      overflow: hidden;
    }
  }
}

.center-module {
  flex: auto;
  height: 100%;
  margin: 0 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .map-style {
    width: 100%;
    height: 562px;
  }
  .smoke-trend {
    height: 246px;
    display: flex;
    flex-direction: column;
    .smoke-trend-main {
      width: 100%;
      height: 208px;
      background: url(../../assets/img/ng-st-bg.png);
      background-size: 100% 100%;
      background-origin: border-box;
    }
  }
}

// 右边
.right-module {
  width: 504px;
  flex-shrink: 0;
  .early-warning {
    height: 328px;
    .ew-main {
      height: 290px;
      background: url(../../assets/img/ng-ew-bg.png);
      background-size: 100% 100%;
      background-origin: border-box;
      .ew-con-main {
        width: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 16px 37px 6px;
        .sfcm-item {
          flex: 1;
          display: flex;
          align-items: center;
          .icon {
            width: 45px;
            height: 45px;
            margin-right: 10px;
          }
          .sfcm-item-detail {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #ffffff;
            line-height: 1.2;
          }
        }
      }

      .ew-topic {
        width: 483px;
        height: 32px;
        margin: 8px auto 10px;
        box-sizing: border-box;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #ffffff;
        padding-left: 38px;
        line-height: 32px;
        background: url(../../assets/img/ng-topic1-bg.png);
        background-size: 100% 100%;
        background-origin: border-box;
      }
      .sle-category {
        width: 100%;
        height: 190px;
      }
    }
  }

  .super-review {
    height: 180px;
    margin-top: 20px;
    .sr-main {
      box-sizing: border-box;
      padding: 18px 8px 18px 13px;
      height: 142px;
      background: url(../../assets/img/ng-sr-bg.png);
      background-size: 100% 100%;
      background-origin: border-box;
      display: flex;
      flex-direction: column;
      .inspect-list {
        flex: 1;
        display: flex;
        .item {
          width: 119.5px;
          white-space: nowrap;
          .icon {
            width: 40px;
            height: 40px;
            margin-right: 9px;
          }
          display: flex;
          align-items: center;

          .item-detail {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #ffffff;
          }
        }
      }
    }
  }

  .key-household {
    height: 282px;
    margin-top: 20px;
    .kh-main {
      height: 244px;
      background: url(../../assets/img/ng-eh-bg.png);
      background-size: 100% 100%;
      background-origin: border-box;
      .pictorialBar {
        width: 100%;
        height: 145px;
      }
      .ew-con-main {
        width: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 16px 37px;
        .sfcm-item {
          flex: 1;
          display: flex;
          align-items: center;
          .icon {
            width: 45px;
            height: 45px;
            margin-right: 10px;
          }
          .sfcm-item-detail {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #ffffff;
            line-height: 1.2;
          }
        }
      }
      .ew-topic {
        width: 483px;
        height: 32px;
        margin: 8px auto 10px;
        box-sizing: border-box;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #ffffff;
        padding-left: 38px;
        line-height: 32px;
        background: url(../../assets/img/ng-topic1-bg.png);
        background-size: 100% 100%;
        background-origin: border-box;
      }
    }
  }
}
</style>
